<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="echarts.js"></script>
  <!-- 引入JQuery文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <label>请输入查询用户名</label>
  <input id="user">
  <button onclick="getPicture()">确认查询</button>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:800px;"></div>
<script type="text/javascript">
  function getPicture() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var datause
    var ip = "127.0.0.1";
    var muser = document.getElementById("user").value
    $(document).ready(function () {
      // 登录请求
      $.ajax({
        url: 'http://' + ip + ':5000/getView',
        method: 'POST',
        data: {
          user: muser
        },
        success: function (data, textStatus, xhr) {
          console.log(JSON.stringify(data));
          if (data.status === true) { // 成功响应
            datause = data.arr;
            option = {
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: datause/* [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]*/,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
            console.log(datause)
          } else {
            alert("用户查询失败!")
          }
        },
        error: function (xhr, textStatus, error) {
          console.log(xhr);
          if (xhr.status === 401) { // 未授权的响应
            weui.alert(xhr.responseJSON.message);
          }
        }
      });

    });

    console.log("optionnnnnnnnnnnnnnnn" + option)
  }

</script>
</body>
</html>

